@import "../../app.scss";

.login-page {
  width: 100%;
  height: 100vh;
  background: $background-color;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  box-sizing: border-box;
  position: relative;

  .logo-container {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo-circle {
      width: 160px;
      height: 160px;
      border-radius: 80px;
      background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 25%) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 32px;
      box-shadow: 0 10px 25px rgba($primary-color, 0.4), inset 0 -2px 10px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;

      &:before {
        content: '';
        position: absolute;
        top: -30px;
        left: -30px;
        right: -30px;
        bottom: -30px;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
        opacity: 0.8;
      }

      &:active {
        transform: scale(1.05);
        box-shadow: 0 15px 30px rgba($primary-color, 0.5), inset 0 -2px 10px rgba(0, 0, 0, 0.3);
      }
    }

    .logo-text {
      font-size: 56px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 2px;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      position: relative;
      z-index: 2;
      font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    }
  }

  .app-slogan {
    font-size: 28px;
    color: $text-color-secondary;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 90px;
    line-height: 1.4;
    width: 100%;
    white-space: nowrap;
  }

  .login-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .login-button {
      width: 100%;
      height: 90px;
      background: $primary-color;
      color: #fff;
      border-radius: 45px;
      font-size: 32px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      box-shadow: 0 8px 16px rgba($primary-color, 0.3);
      transition: all 0.3s ease;

      &:active {
        background: $primary-color-dark;
        transform: translateY(2px);
        box-shadow: 0 4px 8px rgba($primary-color, 0.3);
      }
    }

    .privacy-terms {
      font-size: 24px;
      color: $text-color-secondary;
      margin-top: 24px;
      text-align: center;
      line-height: 1.5;

      .link {
        color: $primary-color;
        display: inline;
        text-decoration: underline;
        font-weight: 500;
      }
    }
  }

  .version {
    position: absolute;
    bottom: 40px;
    font-size: 24px;
    color: $text-color-light;
    opacity: 0.8;
  }
}
